<template>
    <div class="map">
        <img class="loading" :src="require(`@/assets/loading.gif`)" alt />
        <div id="map" class="map_wrap"></div>
    </div>
</template>

<script>
export default {
    props: ["locations"],
    data() {
        return {
            locationList: [],
        };
    },
    mounted() {
        if (!window.AMap) {
            window.onLoad = () => {
                this.initMap();
            };
            var url =
                "https://webapi.amap.com/maps?v=1.4.15&key=	0f8f5fd82e0986d93c2f032a9ec3a345&callback=onLoad";
            var jsapi = document.createElement("script");
            jsapi.charset = "utf-8";
            jsapi.src = url;
            document.head.appendChild(jsapi);
        } else {
            this.initMap();
        }
    },
    methods: {
        initMap() {
            let self = this;
            var map = new AMap.Map("map");
            map.setZoom(10);

            try {
                map.setCenter(this.locationList[0].location);
            } catch (err) {}

            self.locationList.forEach(function (marker, index) {
                new AMap.Marker({
                    map: map,
                    position: marker.location,
                    animation: "AMAP_ANIMATION_DROP",
                    content: `<span class="marker">${index + 1}</span>`,
                    topWhenClick: true,
                    title: marker.name,
                });
            });

            AMap.plugin("AMap.CitySearch", function () {
                var citySearch = new AMap.CitySearch();
                citySearch.getLocalCity(function (status, result) {
                    if (status === "complete" && result.info === "OK") {
                        // 查询成功，result即为当前所在城市信息
                        if (!self.$route.query.cityName) {
                            self.$router.push("/hotel?cityName=" + result.city);
                            self.$alert(
                                "当前定位城市: " + result.city,
                                "提示",
                                {
                                    confirmButtonText: "确定",
                                    type: "success",
                                }
                            );
                        }
                    }
                });
            });
        },
    },
    watch: {
        locations() {
            this.locationList = this.locations;
        },
        locationList() {
            this.initMap();
        },
    },
};
</script>

<style lang="less" scoped>
.map {
    width: 420px;
    height: 260px;
    position: relative;
    .map_wrap,
    .loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}
/deep/ .marker {
    position: absolute;
    width: 26px;
    height: 38px;
    line-height: 32px;
    background: url("https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png")
        no-repeat;
    background-size: 26px 38px;
    font-size: 12px;
    color: #fff;
    text-align: center;
}
</style>
